<template>
	<view class="page-body" :class="[app.setCStyle(from), isGrayBg ? '':'bg-white']">
		<u-navbar v-if="return_index==0" back-text="返回" :background="{backgroundColor: isGrayBg ? '#f2f2f2':''}"
			title="实名认证">
			<view v-if="isShowResetBtn" slot="right" @click="reset = true; isShowResetBtn = false"
				class="fs30 u-p-r-20">重新认证</view>
		</u-navbar>
		<u-navbar v-if="return_index==1" :custom-back="return_indexs" back-text="返回"
			:background="{backgroundColor: isGrayBg ? '#f2f2f2':''}" title="实名认证">
			<view v-if="isShowResetBtn" slot="right" @click="reset = true; isShowResetBtn = false"
				class="fs30 u-p-r-20">重新认证</view>
		</u-navbar>
		<view v-if="check_id_card == 0 || reset">
			<u-form v-if="!isSubmitSuccess" :model="model" ref="uForm" :errorType="errorType">

				<view class="p20">
					<view class="bg-white u-p-l-40 u-p-r-20 br20 clamp">
						<u-form-item label="姓名" label-width="180" :border-bottom="true" :required="true"
							prop="real_name">
							<u-input placeholder="请输入" v-model="model.real_name" type="text"></u-input>
						</u-form-item>
						<u-form-item label="身份证号码" label-width="180" :border-bottom="true" :required="true"
							prop="id_card_number">
							<u-input placeholder="请输入" v-model="model.id_card_number" type="text"></u-input>
						</u-form-item>
						<u-form-item class="hide" prop="id_card_positive">
							<u-input v-model="model.id_card_positive" type="text"></u-input>
						</u-form-item>
						<u-form-item class="hide" prop="id_card_back">
							<u-input v-model="model.id_card_back" type="text"></u-input>
						</u-form-item>
					</view>
				</view>

				<view class="p20">
					<view class="p20 bg-white br20 clamp">
						<view class="fs30 font-w600">
							<text style="color: #e73146;">*</text>身份证照片
						</view>
						<view class="u-m-t-80">
							<view class="" @click="upload('positive')">
								<image class="imagemz" :src="id_card_positive"
									@error="id_card_positive='/static/public/images/id_card/img_front.jpg'"></image>
							</view>
						</view>
						<view class="fs32 u-m-t-40 u-m-b-80 center">上传身份证正面照片</view>
						<view class="">
							<view class="" @click="upload">
								<image class="imagemz" :src="id_card_back"
									@error="id_card_back='/static/public/images/id_card/img_back.jpg'"></image>
							</view>
						</view>
						<view class="fs32 u-m-t-40 u-m-b-80 center">上传身份证背面照片</view>
					</view>
				</view>



				<!-- <view class="mt20 p20 bg-white">
					<view class="fs30 font-w600">
						拍摄身份证要求：
					</view>
					<view class="mt30 fs26 color-99">
						<view>只能上传不超过5M、jpg、png格式的图片</view>
						<view>拍摄时确保身份证<text style="color: #e73146;">边框完整，字体清晰，亮度均匀；</text></view> 	
					</view>
					<view class="mt60">
						<image mode="widthFix" style="width: 100%;" src="/static/public/images/id_card/img_long.jpg"></image>
					</view>
				</view> -->

				<view class="mt40 p20">
					<u-button size="default" shape="circle" type="warning" class="defaultbtn" @click="submit">确定
					</u-button>
					<!-- <u-button v-if="check_id_card == 1" size="default" shape="circle" type="success" class="graybtn">已认证</u-button>
					<u-button v-else-if="check_id_card == 2" size="default" shape="circle" type="warning" class="graybtn">审核中</u-button>
					<u-button v-else-if="check_id_card == 3" size="default" shape="circle" type="warning" class="primarybtn" @click="submit">重新提交</u-button> -->
				</view>
			</u-form>

			<view v-else class="success center p40">
				<u-icon name="checkmark-circle-fill" color="#FFD66F" size="200" label="提交成功,请等待审核" label-size="40"
					label-pos="bottom"></u-icon>
				<u-button @click="back" hover-class="none" shape="circle" size="default" class="mt40 defaultbtn">确定
				</u-button>
			</view>
		</view>
		<view class="check" v-else>
			<view class="top-icon">
				<u-icon v-if="check_id_card == 1" :name="img_src+'pass.png'" size="200" label="认证成功" label-size="42"
					label-pos="bottom" margin-top="20rpx"></u-icon>
				<u-icon v-else-if="check_id_card == 2" :name="img_src+'checking.png'" size="200" label="审核中"
					label-size="42" label-pos="bottom" margin-top="20rpx"></u-icon>
				<u-icon v-else-if="check_id_card == 3" :name="img_src+'fail.png'" size="200" label="认证失败"
					label-size="42" label-pos="bottom" margin-top="20rpx"></u-icon>
			</view>
			<view v-if="check_remark" class="check-remark center p30">{{check_remark}}</view>
			<view class="info p20">
				<view class="">
					<u-section class="mt40" title="姓名" :sub-title="model.real_name" :arrow="false" :show-line="false">
					</u-section>
					<u-line class="mt20" color="#f0f0f0" />
					<u-section class="mt40" title="身份证号码" :sub-title="model.id_card_number" :arrow="false"
						:show-line="false"></u-section>
					<u-line class="mt20" color="#f0f0f0" />
					<u-section class="mt40" title="身份证照片" sub-title=" " :arrow="false" :show-line="false"></u-section>

					<view class="mt30">
						<u-grid :col="2" :border="false">
							<u-grid-item class="p10">
								<image class="imagemz" :src="id_card_positive"
									@error="id_card_positive='/static/public/images/id_card/img-front.png'"></image>
							</u-grid-item>
							<u-grid-item class="p10">
								<image class="imagemz" :src="id_card_back"
									@error="id_card_back='/static/public/images/id_card/img-back.png'"></image>
							</u-grid-item>
						</u-grid>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				from: '',
				upsize: 5 * 1024 * 1024,
				reset: false,
				check_id_card: 0,
				check_remark: '',
				id_card_positive: "/static/public/images/id_card/img-front.png",
				id_card_back: "/static/public/images/id_card/img-back.png",
				img_src: "/static/public/images/id_card/",
				model: {
					real_name: '',
					id_card_number: '',
					id_card_positive: '',
					id_card_back: ''
				},
				border: false,
				isSubmitSuccess: false,
				labelPosition: 'left',
				errorType: ['toast'],
				rules: {
					real_name: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur'],
					}],
					id_card_number: [{
							required: true,
							message: '请输入身份证号码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.idCard(value);
							},
							message: '身份证号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					id_card_positive: [{
						required: true,
						message: '请上传身份证头像面.',
						trigger: ['change', 'blur'],
					}],
					id_card_back: [{
						required: true,
						message: '请上传身份证国微面.',
						trigger: ['change', 'blur'],
					}]
				},
				isGrayBg: true,
				isShowResetBtn: false,
				return_index: 0,
			};
		},
		onLoad(options) {
			if (options.like) {
				this.return_index = 1
			}
			this.getUserInfo();
			this.from = options.from;
		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			},

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {
			check_id_card(n, o) {
				console.log('nnnnn', n)
				if (n != 0) {
					this.isGrayBg = false;
				}
				if (n == 3) this.isShowResetBtn = true;
			},
			reset(n, o) {
				console.log('reset n', n)
				if (n) this.isGrayBg = true;
			},
			isSubmitSuccess(n, o) {
				console.log('isSubmitSuccess n', n)
				if (n) this.isGrayBg = false;
			}
		},
		methods: {
			return_indexs() {
				uni.navigateTo({
					url: '/pages/member/center/index'
				});
			},
			getUserInfo() {
				//获取登录会员信息
				this.$u.api.getUserInfo().then(res => {
					this.model.real_name = res.data.real_name;
					this.check_id_card = res.data.check_id_card;
					this.check_remark = res.data.check_remark;
					this.model.id_card_number = res.data.id_card_number;
					if (res.data.id_card_positive) {
						this.id_card_positive = this.config.baseUrl + res.data.id_card_positive;
						this.model.id_card_positive = res.data.id_card_positive;
					}
					if (res.data.id_card_back) {
						this.id_card_back = this.config.baseUrl + res.data.id_card_back;
						this.model.id_card_back = res.data.id_card_back;
					}

				});
			},
			upload(type) {
				var that = this;
				if (this.check_id_card == 1) {
					this.$u.toast('已认证不能重新上传.');
					return false;
				}
				if (this.check_id_card == 2) {
					this.$u.toast('正在审核中，不能重新上传.');
					return false;
				}
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						if (res.tempFiles[0].size > that.upsize) {
							that.$u.toast('图片不能大于5MB.');
							return false;
						}
						uni.uploadFile({
							url: that.config.upImageUrl,
							filePath: tempFilePaths[0],
							name: 'file',
							success: (resb) => {
								resb = JSON.parse(resb.data);
								if (resb.code < 1) {
									that.$u.toast(resb.msg);
									return false;
								}
								if (type == 'positive') {
									that.id_card_positive = that.config.baseUrl + resb.file;
									that.model.id_card_positive = resb.file;
								} else {
									that.id_card_back = that.config.baseUrl + resb.file;
									that.model.id_card_back = resb.file;
								}
							}
						});

					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (!valid) {
						return false;
					}
					this.$u.post('member/api.users/postIdCard', this.model).then(res => {
						console.log(res);
						if (res.code == 1) {
							this.isSubmitSuccess = true;
						} else {
							uni.showModal({
								title: '提示',
								content: res.msg,
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/channel/center/index'
										});
									}
								}
							});
						}
					})
				})
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>
<style lang="scss">
	.top_tip_icon {
		width: 150rpx !important;
		height: 150rpx !important;
		margin: 0rpx auto;
	}


	.imagemz {
		display: block;
		width: 526rpx;
		height: 320rpx;
		margin: 0 auto;
	}

	.info .imagemz {
		width: 344rpx;
		height: 210rpx;
	}

	.color-text {
		color: $base-color;
	}

	.btn-bg {
		background: #e92525;
		color: #FFFFFF;
	}

	.top-icon {
		position: relative;
		width: 200rpx;
		margin: 100rpx auto 0;

		.small-icon {
			position: absolute;
			bottom: 80rpx;
			right: 0;
			z-index: 9;
			border-radius: 50%;
			background: #FFFFFF;
		}
	}

	.info-title {
		background: #f0f0f0;
		padding: 20rpx 30rpx;
		font-size: 28rpx;
	}

	.check-remark {
		font-size: 28rpx;
		color: #e92525;
		word-break: break-word;
	}
</style>
